<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/solution/environment_banner.png')] bg-image-base"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">环境监测系统</h1>
        <p class="xl:w-[35vw] mt-10 banner-text">
          联筑达·智慧工地环境监测系统，通过应用物联网、自动控制、大数据和云计算技术，对施工现场的环境质量进行实时记录、监测、统计，支持远程实时动态监测，并对预警数值实时报警处理，智能联动喷淋降尘设备，实现绿色环保建造。
        </p>
      </div>
    </div>

    <div class="pt-[50px] pb-[70px]">
      <h3 class="md:text-[26px] font-extrabold text-[#0099FF] text-center">
        尘土飞扬危害大，绿色建造刻不容缓！
      </h3>
      <div class="module-con flex space-x-[27px] mt-[47px]">
        <div class="relative p-8 text-sm text-[#222] rounded xl:leading-9">
          <img
            class="absolute w-full h-full -z-10 left-0 top-0"
            src="~/assets/images/solution/env_hint_01.png"
          />
          建筑施工过程中，因施工人员活动或机械运转，产生大量扬尘悬浮，工地现场及周围粉尘浓度增加，PM2.5急剧上升，造成大气环境恶劣，雾霾天气频发，对生态环境的破坏十分巨大。
        </div>
        <div class="p-8 text-sm text-[#222] rounded xl:leading-9 relative">
          <img
            class="absolute w-full h-full -z-10 left-0 top-0"
            src="~/assets/images/solution/env_hint_02.png"
          />
          建筑施工现场的扬尘颗粒会随着空气流动而移动，一旦进入肺中会引起一系列疾病。此外，扬尘在受到污染后，容易附着大量有毒物质，成为传染疾病的媒介，对人类健康充满威胁。
        </div>
      </div>
    </div>

    <div class="pt-[70px] pb-20 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">功能特点</h2>
        <div class="flex flex-wrap mt-10 justify-center">
          <template v-for="(item, ind) in traitList">
            <div
              :key="item.name"
              class="w-[280px] h-[339px] bg-white sm:mr-5 mb-6 px-7 pt-12 relative text-center rounded-sm border border-[#EDF4FB] border-t-2 border-t-[#0099FF]"
            >
              <img
                class="inline-block"
                :src="
                  require(`../../assets/images/solution/env_ trait_0${
                    ind + 1
                  }.png`)
                "
              />
              <div class="text-[#222] mt-[15px]">{{ item.name }}</div>
              <p
                class="mt-[18px] text-left text-[#828282] text-sm xl:leading-6"
              >
                {{ item.content }}
              </p>
            </div>
          </template>
        </div>
      </div>
    </div>

    <div
      class="pt-[90px] pb-[109px] bg-[url('../../assets/images/solution/env_ hardware_banner.png')] bg-image-base"
    >
      <div class="module-con">
        <h2 class="module-title">硬件产品</h2>
        <div
          class="flex mt-10 justify-between md:justify-start md:space-x-[60px]"
        >
          <div
            class="w-[205px] h-[47px] rounded-3xl scale-75 md:scale-100 flex flex-center border border-[#0E93FF] text-[#0E93FF]"
            :class="{ 'bg-[#0E93FF] !text-white': !hardwareCurrent }"
            @click="hardwareCurrent = 0"
          >
            泵吸式扬尘监测设备
          </div>
          <div
            class="w-[205px] h-[47px] rounded-3xl scale-75 md:scale-100 flex flex-center border border-[#0E93FF] text-[#0E93FF]"
            :class="{ 'bg-[#0E93FF] !text-white': hardwareCurrent }"
            @click="hardwareCurrent = 1"
          >
            扩散式扬尘监测设备
          </div>
        </div>
        <div class="mt-10">
          <img
            v-show="hardwareCurrent === 0"
            alt="环境监测系统"
            class="w-full h-fit"
            src="../../assets/images/solution/env_product_01.png"
          />
          <img
            v-show="hardwareCurrent === 1"
            class="w-full h-fit"
            src="../../assets/images/solution/env_product_02.png"
          />
        </div>
      </div>
    </div>

    <div class="pt-[84px] pb-18 bg-[#FBFBFB]">
      <div class="w-[96%] xl:w-[1200px] mx-auto">
        <h2 class="module-title">应用效果</h2>
        <div class="flex flex-wrap mt-10">
          <div v-for="(item, index) in 8" :key="index" class="effect-item">
            <img
              class="w-full h-full"
              :src="
                require(`../../assets/images/solution/env_effect_0${item}.png`)
              "
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '全面检测',
          content:
            '24小时全天候监测pm2.5、pm10、噪音、湿度、温度、风向、风速、风级等多项参数，数据大屏轮播切换显示。',
        },
        {
          name: '实时展现',
          content:
            '监测数据可以在现场LED大屏、智慧工地PC端、手机小程序多平台实时显示，方便监管单位随时随地查看。',
        },
        {
          name: '预警响应',
          content:
            '在监测值超过预警时自动启动相关设备，进行自动化、智能化报警调试，在智慧工地PC端和手机移动小程序上都可收到预警提醒。',
        },
        {
          name: '设备联动',
          content:
            '联动喷淋设备，当监测数据超出预警数值，系统自动开启喷淋设备进行降尘处理，预防扬尘危害环境及生命健康。',
        },
      ],
      hardwareCurrent: 0,
    }
  },
  head: {
    title: '环境监测系统-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '环境监测系统',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地环境监测系统，通过应用物联网、自动控制、大数据和云计算技术，对施工现场的环境质量进行实时记录、监测、统计，支持远程实时动态监测，并对预警数值实时报警处理，智能联动喷淋降尘设备，实现绿色环保建造。',
      },
    ],
  },
}
</script>

<style scoped>
.effect-item {
  width: calc(25% - 18px);
  @apply mb-6 mr-[18px];
}
</style>
